layui.config({
    base: '/static/js/lib',
    version: new Date().getTime()
}).use(['layer', "form", "tree", "laytpl"], function () {

    $ = layui.jquery;
    var layer = layui.layer;
    var laytpl = layui.laytpl;
    var form = layui.form;

    var id = $("#id").val();
    $(".reload").click(function () {
        $("#outline").empty();
        loadOutline();
    });

    function loadOutline() {
        $.get("/chapter/detail?id=" + id, function (res) {
            if (res.code == "00000") {
                var nodes = buidTree(res.data);
                layui.tree({
                    elem: "#outline",
                    nodes: nodes,
                    click: nodeClick
                });
            } else {
                console.log(res);
            }
        })
    }

    loadOutline();

    function buidTree(subCourses) {
        var nodes = [{
            name: "课程大纲",
            nodeType: 0,
            children: new Array()
        }];
        for (var i = 0; i < subCourses.length; i++) {
            subCourses[i].name = subCourses[i].courseName;
            subCourses[i].nodeType = 1;
            subCourses[i].children = new Array();
            for (var j = 0; j < subCourses[i].chapters.length; j++) {
                subCourses[i].chapters[j].name = subCourses[i].chapters[j].chapterName;
                subCourses[i].chapters[j].nodeType = 2;
                subCourses[i].chapters[j].children = new Array();
                for (var k = 0; k < subCourses[i].chapters[j].sections.length; k++) {
                    subCourses[i].chapters[j].sections[k].name = subCourses[i].chapters[j].sections[k].sectionName;
                    subCourses[i].chapters[j].sections[k].nodeType = 3;
                    subCourses[i].chapters[j].children.push(subCourses[i].chapters[j].sections[k]);
                }
                subCourses[i].children.push(subCourses[i].chapters[j]);
            }
            nodes[0].children.push(subCourses[i]);
        }
        return nodes;
    }

    var currNode;

    function nodeClick(node) {
        var nodeType = node.nodeType;
        if (nodeType == 0) {
            var getTpl = $("#outline-func-tpl").html();
            laytpl(getTpl).render({}, function (html) {
                $("#func-view").html(html);
            });
            $("#data-view").empty();
        } else if (nodeType == 1) {
            var getTpl = $("#subCourse-func-tpl").html();
            laytpl(getTpl).render({
                id: node.id,
                courseName: node.courseName
            }, function (html) {
                $("#func-view").html(html);
            });
            $("#data-view").empty();
            currNode = node;
        } else if (nodeType == 2) {
            var getTpl = $("#chapter-func-tpl").html();
            laytpl(getTpl).render({
                id: node.id,
                chapterName: node.chapterName
            }, function (html) {
                $("#func-view").html(html);
            });
            $("#data-view").empty();
            currNode = node;
        } else if (nodeType == 3) {
            var getTpl = $("#section-func-tpl").html();
            laytpl(getTpl).render({
                id: node.id,
                sectionName: node.sectionName
            }, function (html) {
                $("#func-view").html(html);
            });
            $("#data-view").empty();
            currNode = node;
        }
    }

    $(document).on("click", ".add-subCourse", function () {
        var getTpl = $("#subCourse-tpl").html();
        laytpl(getTpl).render({
            id: "",
            courseName: "",
            courseHours: "",
            sort: ""
        }, function (html) {
            $("#data-view").html(html);
        });
    });

    $(document).on("click", ".subCourse-detail", function () {
        var getTpl = $("#subCourse-tpl").html();
        laytpl(getTpl).render({
            id: currNode.id,
            courseName: currNode.courseName,
            courseHours: currNode.courseHours,
            sort: currNode.sort
        }, function (html) {
            $("#data-view").html(html);
        });
    });

    $(document).on("click", ".add-chapter", function () {
        var getTpl = $("#chapter-tpl").html();
        laytpl(getTpl).render({
            id: "",
            subCourseId: currNode.id,
            chapterName: "",
            sort: ""
        }, function (html) {
            $("#data-view").html(html);
        });
    });

    $(document).on("click", ".chapter-detail", function () {
        var getTpl = $("#chapter-tpl").html();
        laytpl(getTpl).render({
            id: currNode.id,
            subCourseId: currNode.subCourseId,
            chapterName: currNode.chapterName,
            sort: currNode.sort
        }, function (html) {
            $("#data-view").html(html);
        });
    });

    $(document).on("click", ".add-section", function () {
        var getTpl = $("#section-tpl").html();
        laytpl(getTpl).render({
            id: "",
            subCourseId: currNode.subCourseId,
            chapterId: currNode.id,
            mainCourseId: currNode.mainCourseId,
            sectionName: "",
            videoId: "",
            videoPlayCode: "",
            sort: ""
        }, function (html) {
            $("#data-view").html(html);
        });
    });

    $(document).on("click", ".section-detail", function () {
        var getTpl = $("#section-tpl").html();
        laytpl(getTpl).render({
            id: currNode.id,
            subCourseId: currNode.subCourseId,
            chapterId: currNode.chapterId,
            sectionName: currNode.sectionName,
            videoId: currNode.videoId,
            videoPlayCode: currNode.videoPlayCode,
            sort: currNode.sort,
            isTrailers: currNode.isTrailers,
            trailersTime: currNode.trailersTime
        }, function (html) {
            $("#data-view").html(html);
            form.render();
        });
    });

    form.on("submit(addSection)", function (data) {
        var submitData = {
            trailersTime: data.field.trailersTime,
            isTrailers: data.field.isTrailers,
            id: data.field.id
        };
        $.post("/chapter/edit/section", submitData, function (res) {
            if (res.code == "00000") {
                layer.msg("保存成功", {
                    icon: 6, time: 1500, end: function () {
                        $("#func-view").empty();
                        $("#data-view").empty();
                        $(".reload").click();
                    }
                });
            } else {
                console.log(res);
            }
        });
        return false;
    });
});